


<template>
  <div class="platformRrules">
    <!-- 头部 -->
    <!-- <div class="top">
      <top-info></top-info>
    </div> -->
    <!-- 中间内容 -->
    <div class="content">
      <div class="container">
        <div class="all">
          <div class="tittle">
            <img src="../../../assets/images/FrameBlue.png" alt="" />
          </div>
        </div>

        <div class="content_text">
          <div class="feedback">
            欢迎反馈问题，您的意见和建议就是我们的动力!
          </div>
          <div class="feedback_notes">
            我们会认真阅读您反馈的每一个问题，并尽快给您答复，在这里您可以提出遇到的问题，也可发表自己的建议和想法。
          </div>
          <el-form
            ref="ruleFormRef"
            :model="formData"
            :rules="rules"
            label-width="120px"
            class="demo-ruleForm"
            :size="formSize"
            status-icon
            style="margin-top: 30px"
          >
            <el-form-item label="意见图片" prop="name">
              <el-upload
                :file-list="fileList"
                multiple
                :show-file-list="true"
                list-type="picture-card"
                action="https://api.ekee.com.cn/api/common/upload"
                :on-success="handleAvatarSuccess"
                :on-remove="handleRemove"
                :before-upload="beforeAvatarUpload"
                accept=".jpg,.JPG"
              >
                <el-icon><Plus /> </el-icon>
              </el-upload>
            </el-form-item>
            <el-form-item>
              <span
                style="
                  height: 22px;
                  font-size: 12px;
                  font-family: PingFang SC-Medium, PingFang SC;
                  font-weight: 500;
                  color: rgba(0, 0, 0, 0.38);
                  line-height: 22px;
                "
                >只支持 JPG 格式</span
              >
            </el-form-item>
            <el-form-item label="意见内容" prop="content">
              <el-input v-model="formData.content" :rows="6" type="textarea" />
            </el-form-item>
            <el-form-item
              style="
                margin-top: 30px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
              "
            >
              <el-button
                class="denglu"
                style="
                  width: 140px;
                  height: 42px;
                  border-radius: 8px 8px 8px 8px;
                  opacity: 1;
                "
                >取消</el-button
              >
              <el-button
                type="primary"
                style="
                  width: 140px;
                  height: 42px;
                  background: #2487e8;
                  border-radius: 8px 8px 8px 8px;
                  opacity: 1;
                "
                class="denglu"
                @click="submitForm(ruleFormRef)"
                >确定</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
    <!-- 底部 -->
    <!-- <div class="plat_bottom">
      <home-page-bottom></home-page-bottom>
    </div> -->
    <el-dialog
      v-model="submitVisible"
      width="544"
      align-center
      :show-close="false"
      :destroy-on-close="true"
      center>
      <div class="tip-text flex justify-center">无法提交，请登录后提交意见反馈</div>
      <div class="flex justify-center">
        <el-button
          style="
            width: 140px;
            height: 42px;
            background: rgba(36,135,232,0.12);
            color: #2487E8
          "
          round
          @click="submitVisible=false"
          >取消</el-button
        >
        <el-button
          type="primary"
          style="
            width: 140px;
            height: 42px;
            background: #2487e8;
          "
          round
          @click="onLogin"
          >去登录</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
    
    <script setup>
// import topInfo from "../../../components/topInfo.vue";
// import homePageBottom from "../../../components/homePageBottom.vue";
import { ref } from "vue";
import { useRouter } from "vue-router";
import { FeedbackSave } from "../../../api/platform";
import { ElMessage } from "element-plus";

const router = useRouter();
defineProps({
  msg: String,
});

const count = ref(0);
const formData = ref({
  content: "",
  list: [],
  images: "",
});
const submitVisible = ref(false);

// //自定义函数用来覆盖原有的XHR行为（默认提交行为）
// function httpRequest(option) {
//   //将图片存到数组中
//   fileList.value.push(option);
// }

const rules = ref({
  content: [
    { required: true, message: "请输入内容", trigger: "blur" },
    // { min: 3, max: 5, message: "Length should be 3 to 5", trigger: "blur" },
  ],
});
const ruleFormRef = ref();
//定义一个响应式数组用来接收图片
const fileList = ref([]);

const flag=ref(true)
const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    console.log("formData.value.list", formData.value.list);
    const fullurl = formData.value.list.map((item) => {
      return item.path;
    });
    let fullurlInfo = fullurl.toString();
    //图片地址
    formData.value.images = fullurlInfo;
    FeedbackSave(formData.value)
      .then((res) => {
        // console.log("res", res.data);

        if (res.code == 1) {
          ElMessage({ message: res.msg, type: "success" });
          router.push("/home");
          flag.value=true
        }
        if (res.code == 0) {
          ElMessage({ message: res.msg });
        }
      })
      .catch((err) => {
        // ElMessage({ message: err.msg, type: "error" });
        submitVisible.value = true;
      });
  });
};
// 去登录
const onLogin = () => {
  router.push("/login");
}
//移除
const handleRemove = (file, fileList) => {
  formData.value.list.forEach((item, index, array) => {
    if (file.name == item.name) {
      array.splice(index, 1);
    }
    // console.log("大苏打", array);
  });
  console.log("删除", formData.value.list);
};
// const isFlag = ref(true);
const beforeAvatarUpload = (rawFile) => {
  console.log("大苏打", rawFile.name);

  // let arrList=[]
  // arrList.push(rawFile.name)
  // console.log('arrList',arrList)

  //   formData.value.list.forEach((item, index, array) => {
  //     if (rawFile.name == item.name) {
  //       isFlag = false;
  //       ElMessage({ message: '图片重复', type: "error" });
  //       return false;
  //       array.splice(index, 1);
  //       return false;
  //     } else {
  //       isFlag = true;
  //     }
  //   });
};
//上传
const handleAvatarSuccess = (response, uploadFile) => {
  console.log("上传", response, uploadFile);
  formData.value.list.push({
    name: uploadFile.name,
    path: response.data.fullurl,
  });
};
</script>
    
    <style scoped lang="less">
/* .read-the-docs {
      color: #000;
    } */
.platformRrules {
  display: flex;
  flex-direction: column;
  // border: 1px solid red;
  // height: 100%;
  width: 100%;
  background: #f5f5f5;
  border-radius: 0px 0px 0px 0px;
  .top {
    // border: 1px solid green;
    margin: 0 auto;
    background-color: #fff;
    width: 100%;
  }
  .container {
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    width: 1200px;
  }
  .content {
    // border: 1px solid red;
    width: 100%;
    background-color: #fff;
    margin-top: 1.5px;
    // min-height: 600px;
    min-height: calc(100vh - 990px);

    // 没有数据
    .tips {
      height: 56px;
      line-height: 56px;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;
      font-size: 14px;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: rgba(0, 0, 0, 0.87);
    }
    .all {
      height: 65px;
      background: #ffffff;
      border-radius: 0px 0px 0px 0px;
      opacity: 1;

      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      //   padding: 0 16px;
      .tittle {
        font-size: 22px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.87);
        margin-top: 30px;
      }
    }
    .content_text {
      background-color: #fff;
      // box-sizing: border-box;
      height: 98px;
      border-radius: 0px 0px 0px 0px;
      padding: 14px 16px;
      // border: 1px solid red;
      min-height: 672px;
      display: flex;
      flex-direction: column;
      border-bottom: 1px solid #e6e6e6;
      .feedback {
        height: 31px;
        font-size: 22px;
        font-family: PingFang SC-Bold, PingFang SC;
        font-weight: bold;
        color: rgba(0, 0, 0, 0.87);
        line-height: 31px;
        margin-top: 18px;
        margin-bottom: 12px;
      }
      .feedback_notes {
        height: 22px;
        font-size: 16px;
        font-family: PingFang SC-Medium, PingFang SC;
        font-weight: 500;
        color: rgba(0, 0, 0, 0.6);
        line-height: 22px;
      }
    }
  }
  .tip-text {
    margin-bottom: 32px;
    font-size: 24px;
    font-weight: bold;
  }
  .plat_bottom {
    // margin-top: 25px;
  }
}
</style>
    